<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header" @click="backChange">
        <el-icon size="20">
          <ArrowLeft />
        </el-icon>
        <span> 新建Banner</span>
      </div>
    </template>

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="Banner名称" prop="name" width="400">
        <el-input v-model="ruleForm.name" placeholder="请输入Banner名称" />
      </el-form-item>

      <el-form-item label="设备选择" prop="checkboxGroup">
        <el-checkbox-group
          v-model="ruleForm.checkboxGroup"
          @change="handleChange"
        >
          <el-checkbox label="电脑端" value="电脑端" size="large" />
          <!-- <el-checkbox
            label="移动端(H5/小程序)"
            value="移动端(H5/小程序)"
            size="large"
          /> -->
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="电脑端封面" prop="picUrl" v-show="typeFunc">
        <uploadImg
          :limit="1"
          :modelValue="modelValueListPc"
          @update:modelValue="modelValuePc"
        ></uploadImg>
      </el-form-item>

      <!-- <el-form-item label="移动端封面" prop="mobileUrl" v-show="typeMobile">
        <uploadImg
          ref="Img"
          :limit="1"
          :modelValue="modelValueListMolib"
          @update:modelValue="modelValue"
        ></uploadImg>
      </el-form-item> -->

      <el-form-item label="电脑端链接" width="400" v-show="typeFunc">
        <el-input v-model="ruleForm.pcUrl" placeholder="Banner链接" />
        <el-icon
          @click="maskBtn"
          :size="20"
          style="cursor: pointer; margin-left: 5px"
        >
          <Link />
        </el-icon>
      </el-form-item>

      <el-form-item v-show="typeFunc">
        <a
          v-if="entranceUrl.pc"
          :href="entranceUrl.pc"
          style="color: #0f5cfb; font-size: 16px; font-weight: 500"
          >前往官网</a
        >
      </el-form-item>

      <!-- <el-form-item label="移动端链接" width="400" v-show="typeMobile">
        <el-input v-model="ruleForm.mobileLianjie" placeholder="Banner链接" />
        <el-icon
          @click="maskBtn"
          :size="20"
          style="cursor: pointer; margin-left: 5px"
        >
          <Link />
        </el-icon>
      </el-form-item> -->

      <!-- <el-form-item v-show="typeMobile">
        <a href="" style="color: #0f5cfb; font-size: 16px; font-weight: 500"
          >扫码至移动端</a
        >
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">预览</el-button>
      </el-form-item>
    </el-form>

    <!-- 弹出框 -->

    <el-dialog v-model="dialogFormVisible" title="常用链接">
      <el-tabs v-model="activeName" type="card" class="demo-tabs">
        <el-tab-pane
          label="常用功能"
          name="first"
          style="border-bottom: 1px solid #ccc"
        >
          <el-radio-group v-model="radio">
            <el-row>
              <el-col class="calssName" :span="24">
                <el-radio :value="3">智能填报</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="6">一键填报</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="9">专业定位测评</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="12">VIP购买</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="15">智能选科</el-radio></el-col
              >
            </el-row>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane
          label="商品服务"
          name="second"
          style="border-bottom: 1px solid #ccc"
        >
          <el-radio-group v-model="radio">
            <el-row style="width: 100%">
              <el-col class="calssName" :span="24">
                <div class="box">
                  <el-radio :value="2">
                    <!-- <img style="width: 154px;height: 94px;" src="@/assets/images/11.jpeg" /> -->
                    <div class="txt">智能填报</div>
                  </el-radio>
                </div>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >添加</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 预览dialog -->
    <el-dialog v-model="dialogFormVisible2" title="效果预览" width="800px">
      <div class="box">
        <div class="padding">
          <el-row>
            <el-col :span="18" class="boxOne">
              <p>电脑端效果</p>
              <div class="boxPic">电脑端暂无素材</div>
            </el-col>
            <el-col :span="6" class="boxTow">
              <p>移动端效果</p>
              <div class="boxPic2">移动端端暂无素材</div>
            </el-col>
          </el-row>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible2 = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import uploadImg from '@/components/ImageUpload2/index';
import { bannerAdd } from '@/api/banner/index';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import useSettingsStore from '@/store/modules/settings';
const settingsStore = useSettingsStore();
const router = useRouter();
const route = useRoute();
const dialogFormVisible = ref(false);
//预览
const dialogFormVisible2 = ref(false);

const activeName = ref('first');

const index = ref('');

const radio = ref(3);

const ruleFormRef = ref(null);

const modelValueListPc = ref([]);
// const modelValueListMolib = ref([]);
// 入口链接
const entranceUrl = computed(() => settingsStore.entranceUrl);
console.log(entranceUrl.value.pc, 'entranceUrl');

let ruleForm = ref({
  name: '',
  checkboxGroup: ['电脑端', '移动端(H5/小程序)'],
  url: '',
  mobileUrl: '',
  pcUrl: '',
  mobileLianjie: '',
});

const rules = reactive({
  name: [{ required: true, message: '请输入Banner名称', trigger: 'blur' }],
  checkboxGroup: [
    { required: true, message: '请选择一个设备', trigger: 'blur' },
  ],
  picUrl: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
  mobileUrl: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
});

const typeFunc = computed(() => {
  return ruleForm.value.checkboxGroup.find((item) => item == '电脑端');
});
// const typeMobile = computed(() => {
//   return ruleForm.value.checkboxGroup.find(
//     (item) => item == '移动端(H5/小程序)'
//   );
// });

// const modelValue = (val) => {
//   ruleForm.value.picUrl = val; // 保存单张图片
//   ruleForm.value.mobileUrl = val;
// };
const modelValuePc = (val) => {
  console.log(val, '看看知性美');

  ruleForm.value.picUrl = val; // 保存单张图片
  ruleForm.value.mobileUrl = val;
};

const backChange = () => {
  router.push({ path: 'advertisement' });
};

function maskBtn() {
  dialogFormVisible.value = !dialogFormVisible.value;
}

function handleChange() {
  typeFunc.value ? modelValuePc() : '';
  // typeMobile.value ? modelValue() : '';
}

// 提交表单的函数
const submitForm = (formEl) => {
  // 初始化参数
  let params = ref({
    id: 0,
    storeId: JSON.parse(localStorage.getItem('userDateInfo'))?.storeId,
    name: ruleForm.value.name,
    status: 0,
  });

  // 如果表单不存在，直接返回
  if (!formEl) return;

  // 表单验证
  formEl.validate(async (valid) => {
    if (!valid) return false;
    const {
      picUrl: pcImgUrl = '',
      pcUrl: pcUrl = '',
      mobileUrl: mImgUrl = '',
      mobileLianjie: mUrl = '',
    } = ruleForm.value;
    // 将解构后的变量赋值给另一个对象
    const quertInfo = {
      pc_img_url: pcImgUrl,
      pc_url: pcUrl,
      m_img_url: mImgUrl,
      m_url: mUrl,
    };
    // 判断选项并调用处理函数
    // 直接通过三元运算符选择调用的函数
    const info = {
      ...params.value, // 保持之前 params 中已有的值
      // type: typeFunc && typeMobile ? 3 : typeFunc ? 1 : typeMobile ? 2 : null,
      type: typeFunc ? 3 : typeFunc ? 1 : typeMobile ? 2 : null,
      ...quertInfo, // 使用解构后的新参数
    };
    await handleBannerAdd(info);
  });
};
// 定义一个处理提交的函数
const handleBannerAdd = (info) => {
  // 调用接口
  bannerAdd(info).then((res) => {
    if (res.code === 20000) {
      ElMessage({
        message: res.msg,
        type: 'success',
      });
      // 跳转到广告页面

      router.push({
        path: 'advertisement',
        query: { id: JSON.stringify(index.value) },
      });
    }
  });
};
//预览
const resetForm = () => {
  dialogFormVisible2.value = true;
};
onMounted(() => {
  index.value = route.query.id;
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
}

:deep(.el-input) {
  width: 400px !important;
  height: 40px !important;
}
:deep(.el-row) {
  width: 100% !important;
}

.box-card {
  margin: 20px;

  .box {
    width: 100%;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 10px 18px 38px;
    height: 370px;
    box-sizing: border-box;
    color: #86909c;

    .boxOne {
      .boxPic {
        width: 95%;
        height: 300px;
        border: 1px solid #ccc;
        margin-top: 10px;
        color: #86909c;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .boxTow {
      .boxPic2 {
        width: 100%;
        height: 300px;
        border: 1px solid #ccc;
        margin-top: 10px;
        color: #86909c;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .calssName {
    margin-bottom: 20px;
    margin-left: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 94px;
      padding-bottom: 20px;
    }

    .txt {
      display: inline-block;
      position: relative;
      top: -40px;
      left: 5px;
    }
  }
}
</style>
